<template> 
	<view class="cbutton" @mousedown="handdleDown" @mouseup="handleUp" @touchstart="handdleDown" @touchend="handleUp">
		<view :class="{circle:true,show:tapdown}">
			
		</view>
		<slot></slot>
	</view>
</template>
<script setup>
	const emit = defineEmits(['tapclick']);
	let tapdown=ref(false)
	
	
	//点击摁住
	let handdleDown=()=>{ 
		tapdown.value=true
	}
	//点击放开
	let handleUp=()=>{
		 
		emit('tapclick')
		setTimeout(()=>{
			tapdown.value=false
		},1000)
	}
</script>
<style lang="scss" scoped>
	.cbutton{
		min-height: 100rpx;
		min-width: 100rpx;
		position: relative;
		@include flex-teng;
		overflow: hidden;
		.circle{
			position: absolute;
			width: 100px;
			height: 100px;
			z-index: 10;
			background-color: #fff;
			opacity: 0.1;
			border-radius: 50%;
			transform: scale(0);
			transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
			&.show{
				transform: scale(10);
			}
		}
	}
</style>